<template>
  <div v-if="isLoad">
    <div class="page" @touchmove.stop.prevent="onMove" @touchstart.stop.prevent="onStart" @touchend.stop.prevent="onEnd">
      <!--div class="page-item p2">
        <div class="page-front"></div>
      </div-->
      <div class="page-item p1" v-for="(item, index) in fp.list.value" :style="item.style.value">
        <div class="page-front" :style="item.rect.value.front">
          <img :src="item.front_img" alt="" class="blockImg" />
        </div>
        <div class="page-back" :style="item.rect.value.back">
          <img :src="item.back_img" alt="" class="blockImg" />
        </div>
      </div>
    </div>
    <button @click="prev" style="position:fixed;left:0px;top:200px;">操作1</button>
    <button @click="next" style="position:fixed;left:100px;top:200px;">操作2</button>
  </div>
</template>
<script>
import { FlipPage } from './class/Flip.js'
import { markRaw } from 'vue'
export default {
  data() {
    return {
      fp: null,
      isLoad: false
    }
  },
  methods: {
    prev(e) {
      this.fp.prev()
    },
    next() {
      this.fp.next()
    },
    onStart(e) {
      this.fp.onStart(e)
    },
    onEnd(e) {
      this.fp.onEnd(e)
    },
    onMove(e) {
      this.fp.onMove(e)
    },
    test_1() {
      console.log('右边上区域')
      let e_point = [40, -40]
      let s_point = [50, -50]

      this.fp.s_point = s_point
      this.fp.e_point = e_point
      let rect = this.fp.calculate()
      console.log(`rect`, rect)
      this.rect = rect
    },
    test_2() {
      console.log('右上线')
      let point = [40, -50]
      this.fp.e_point = point
      let rect = this.fp.calculate()

      console.log(`rect`, rect)
      this.rect = rect
    },
    test_3() {
      console.log('垂直线1')
      let s_point = [50, -50]
      let e_point = [40, -50]

      this.fp.s_point = s_point
      this.fp.e_point = e_point
      let rect = this.fp.calculate()
      console.log(`rect`, rect)
      this.rect = rect
    },
    test_4() {
      console.log('右下角45deg')
      let e_point = [40, -60]
      let s_point = [50, -50]

      this.fp.s_point = s_point
      this.fp.e_point = e_point
      this.fp.calculate((res) => {
        this.rect = res
      })
    },
    test_5() {
      console.log('右下角45deg')
      let e_point = [40, -60]
      let s_point = [40, -50]

      this.fp.s_point = s_point
      this.fp.e_point = e_point
      this.fp.calculate((rect) => {
        console.log(`rect`, rect)
        this.rect = rect
      })
    }
  },
  mounted() {
    this.fp = markRaw(new FlipPage())
    this.isLoad = true
  }
}
</script>
<style type="text/css" lang="scss">
.blockImg {
  display: block;
  width: 100%;
  height: 100%;
}
body {
  margin: 0;
}
.page {
  height: 100vh;
  width: 100vw;
  position: fixed;
  transform-style: preserve-3d;
  &-item {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50px;
    &.p2 {
      .page-front {
        background: #ff000033;
      }
    }
  }
  &-front {
    background: grey;
    width: 200px;
    height: 200px;
    position: absolute;
    box-sizing: border-box;
    //background: url('../../images/p2.jpg') 0 0 / 100% 100% no-repeat;
  }
  &-back {
    width: 200px;
    height: 200px;
    position: absolute;
    box-sizing: border-box;
    background: #9a9af1;
    //background: url('../../images/p2.jpg') 0 0 / 100% 100% no-repeat;
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      opacity: 0.3;
      display: none;
    }
    img {
      transform: scale(-1, 1);
    }
  }
}
</style>
